<template>
  <div class="view-floor-modal" id="floorModal">
    <div class="modal-title">{{ Object.keys(this.modalData).length > 0 ? `${this.modalData.buildingData.buildingName}${this.modalData.floorNum}层` : '' }}</div>
    <ul class="modal-content">
      <li v-for="(item, index) in listData" :key="index" @mouseover="onMouseOver(item)" @mouseout="onMouseOut(item)">
        <img :src="item.image" />
        <span class="text-name">{{ item.name }}：</span>
        <span :class="{ 'text-count': true, 'color-red': item.name === '问题数' }">{{ item.count }}</span>
      </li>
    </ul>
    <div class="btn-more" @click="checkMore">查看更多</div>
    <div class="child-tips" v-show="showTips">
      <ul>
        <li v-for="(item, index) in childData" :key="index">
          <icon></icon>
          <span>{{ item.name }}：</span>
          <span>{{ item.count }}</span>
        </li>
      </ul>
    </div>
    <div class="child-tips1" v-show="showTips1">
      <ul>
        <li v-for="(item, index) in childData1" :key="index">
          <icon></icon>
          <span>{{ item.name }}：</span>
          <span>{{ item.count }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        container: document.getElementById('floorModal'),
        showTips: false,
        showTips1: false,
        listData: [
          {
            name: '实验室',
            count: 0,
            image: require('@/assets/images/viewIcon/icon_sy_lc_sys.png')
          },
          {
            name: '气体钢瓶',
            count: 0,
            image: require('@/assets/images/viewIcon/icon_sy_lc_qtgp.png')
          },
          {
            name: '化学品',
            count: 0,
            image: require('@/assets/images/viewIcon/icon_sy_lc_hxp.png')
          },
          {
            name: '问题数',
            count: 0,
            image: require('@/assets/images/viewIcon/icon_sy_lc_wts.png')
          }
        ],
        childData: [
          {
            name: '重点监管',
            count: 0
          },
          {
            name: '普通',
            count: 0
          }
        ],
        childData1: [
          {
            name: '重点监管',
            count: 0
          },
          {
            name: '普通',
            count: 0
          }
        ]
      }
    },
    props: {
      modalData: {
        type: Object,
        default: () => {}
      }
    },
    watch: {
      modalData: {
        handler (val) {
          this.listData[0].count = val.labNum
          this.listData[1].count = val.gasNum
          this.listData[2].count = val.chemicalNum
          this.listData[3].count = val.problemNum
          this.childData[0].count = val.gasControlNum
          this.childData[1].count = val.gasNormalNum
          this.childData1[0].count = val.chemControlNum
          this.childData1[1].count = val.chemNormalNum
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      onMouseOver (param) {
        param.name === '气体钢瓶' && this.toggleTips()
        param.name === '化学品' && this.toggleTips1()
      },
      onMouseOut () {
        this.showTips = false
        this.showTips1 = false
      },
      toggleTips () {
        this.showTips = !this.showTips
      },
      toggleTips1 () {
        this.showTips1 = !this.showTips1
      },
      checkMore () {
        this.$emit('checkMore', this.modalData)
      }
    }
  }
</script>

<style lang="less" scoped>
  .view-floor-modal {
    top: 0;
    left: 0;
    position: absolute;
    transform: translateY(-50%);
    transition: all ease 0.3s;
    width: 264px;
    height: 252px;
    background: url('~@/assets/images/viewIcon/icon_sy_lctc_bg.png');
    background-size: 100% 100%;
    .modal-title {
      float: right;
      width: 88%;
      height: 28px;
      text-align: center;
      font-weight: 500;
      color: #ffffff;
      line-height: 28px;
      margin: 5px auto;
    }
    .modal-content {
      width: 88%;
      float: right;
      height: calc(100% - 96px);
      padding: 10px 15px 10px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      li {
        display: flex;
        align-items: center;
        height: 32px;
        background: rgba(43, 114, 247, 0.5);
        box-shadow: 0px 0px 16px 0px #081034;
        img {
          padding: 0 10px 0 20px;
        }
        .text-name {
          font-size: 14px;
          font-weight: 500;
          color: #ffffff;
        }
        .text-count {
          padding-left: 5px;
          font-size: 26px;
          font-weight: 500;
          color: #f6ffaa;
        }
        .color-red {
          color: #ff3355;
        }
      }
    }
    .btn-more {
      cursor: pointer;
      width: 198px;
      float: right;
      margin-right: 15px;
      height: 34px;
      background: rgba(18, 58, 155, 0.6);
      border: 1px solid #7fdff7;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      color: #ffffff;
    }
    .child-tips {
      position: absolute;
      top: 40px;
      right: -160px;
      width: 197px;
      height: 100px;
      background: url('~@/assets/images/viewIcon/icon_tc_biaozhu2.png') no-repeat;
      background-position: bottom;
      ul {
        float: right;
        width: 143px;
        height: 85px;
        background: url('~@/assets/images/viewIcon/icon_sy_lctc_ejtcbg.png');
        padding: 20px 0 20px 20px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        li {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #fff;
          i {
            width: 5px;
            height: 5px;
            background: #7fdff7;
            margin-right: 8px;
          }
        }
      }
    }
    .child-tips1 {
      position: absolute;
      top: 90px;
      right: -160px;
      width: 197px;
      height: 100px;
      background: url('~@/assets/images/viewIcon/icon_tc_biaozhu2.png') no-repeat;
      background-position: bottom;
      ul {
        float: right;
        width: 143px;
        height: 85px;
        background: url('~@/assets/images/viewIcon/icon_sy_lctc_ejtcbg.png');
        padding: 20px 0 20px 20px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        li {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #fff;
          i {
            width: 5px;
            height: 5px;
            background: #7fdff7;
            margin-right: 8px;
          }
        }
      }
    }
  }
</style>
